<template>
  <div class="chart">
    <div v-if="widgetData.value.bgImg !== ''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div v-else class="titleBox">
      <!-- <i class="el-icon-picture"></i> -->
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div :style="{ width: w + 'px', height: (h - 40) + 'px' }" id="mapChart"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {
    w() {
      let width = parseInt(this.widgetData.style.w / 4 * 3);
      return width
    },
    h() {
      let height = parseInt(this.widgetData.style.h / 4 * 3);
      return height
    }
  },
  data() {
    return {
      chartData: this.widgetData.value.chartData,
    }
  },
  watch: {},
  created() { },
  mounted() { },
  methods: {
    getEchart() {
      let chartDom = document.getElementById("mapChart");
      let chart = this.$echarts.init(chartDom);

      let option = {
        geo3D: {
          map: 'china',
          regionHeight: 6, //地图厚度
          itemStyle: {
            color: 'rgb(8,32,53,0.8)',
            borderWidth: 2, //分界线宽度
            borderColor: '#409EFF', //分界线颜色
          },
          label: {
            show: true,
            alignText: 'center',
            color: '#fff', //文字颜色
            fontSize: 12, //文字大小
            position: [5, 5],
            padding: [5, 10],
            //lineHeight: 24,
            //backgroundColor: 'rgba(0,0,0,0.35)', //透明度0清空文字背景
            //borderWidth: 1.5, //分界线宽度
            //borderRadius: 5,
            //borderColor: '#F2A451', //分界线颜色
            formatter: function (params) {
              // console.log("渲染", params);
              return params.name
            }
          },
          // 设置单独区域样式
          regions: [],
          // hover高亮颜色
          emphasis: {
            label: {
              formatter: function (params) {
                // console.log("hover", params);
                return params.name
              }
            },
            itemStyle: {
              color: '#1341BE',
              opacity: 0.9, // 透明度
              borderWidth: 1, //分界线宽度
              borderColor: '#00EBFF', //分界线颜色
            },
          },
          shading: 'realistic',
          // 真实感材质相关配置 shading: 'realistic'时有效
          realisticMaterial: {
            detailTexture: 'https://t7.baidu.com/it/u=3363262686,1317189374&fm=193&f=GIF', // 纹理贴图
            textureTiling: 1, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
            roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
            metalness: 0, // 0材质是非金属 ，1金属
            roughnessAdjust: 1
          },
          // shading 为color 时无效
          light: {
            //光照阴影
            main: {
              color: "#4ec7e7", //光照颜色
              intensity: 3, //光照强度
              shadowQuality: 'high', //阴影亮度
              shadow: true, //是否显示阴影
              //shadowQuality: "medium", //阴影质量 ultra //阴影亮度
              alpha: 55,
              beta: 10
            },
            ambient: {
              intensity: 0.7
            }
          },
          // viewControl: viewControl,
          viewControl: {
            distance: 110, // 地图视角 控制初始大小
            // rotateSensitivity: 0, // 旋转
            // zoomSensitivity: 0, // 缩放
            // autoRotate: false,
            // maxBeta: Infinity,
            // minBeta: -Infinity,
            beta: 10, //旋转视角
            alpha: 50, //视角
            panMouseButton: 'left',
            rotateMouseButton: 'right',
            center: [0, 0, 0, 0],
          },
        },
        series: [],
      }

      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
      chart.setOption(option);
    }
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titleBox {
    width: 100%;
    height: 40px;
    position: relative;

    .img {
      width: 100%;
      height: 40px;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      color: #FFFFFF;
      background-color: #000;
      font-size: 18px;
    }

    .el-icon-picture {
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>